/*
* 全局样式，直接就可以用，不需要导入
* */
import {Config, align} from './interface'
import {Dimensions} from 'react-native'

const {height, width} = Dimensions.get('window')
const BACKGROUND_COLOR = "#f3f3f4"
const config: Config = {
    line: {
        height: 0.5,
        opacity: 0.5,
        backgroundColor: 'darkgray'
    },
    root_container: {
        flex: 1,
        backgroundColor: BACKGROUND_COLOR
    },
    bodyPadding: {
        paddingHorizontal: 10,
        paddingVertical: 10
    },
    nav_bar_height_ios: 44,
    nav_bar_height_android: 50,
    backgroundColor: BACKGROUND_COLOR,
    window_height: height,
    d_flex: {
        display: 'flex'
    },
    flex_column: {
        flexDirection: 'column'
    },
    flex_row: {
        flexRow: 'row'
    },
    justify_content_center: {
        justifyContent: 'center'
    },
    justify_content_between: {
        justifyContent: 'space-between'
    },
    align_items_center: {
        alignItems: 'center'
    },
    text_center: {
        textAlign: 'center'
    }
}

export function bodyPadding(number: number): {
    paddingHorizontal: number
    paddingVertical: number
} {
    return {
        paddingHorizontal: number,
        paddingVertical: number
    }
}

export const methodFlexAlign = (jf?: 'sb' | 'center' | '', al?: 'center' | ''): align => {
    let result: align = {
        display: "flex",
        flexDirection: "row"
    }
    if (jf === 'sb') {
        result['justifyContent'] = 'space-between'
    } else if (jf === 'center') {
        result['justifyContent'] = 'center'
    }

    if (al === 'center') {
        result['alignItems'] = 'center'
    }

    return result
}

export default config
